
import React, { useEffect } from 'react';
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
import { LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent ,
  ToolboxComponent,
} from 'echarts/components';

// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

type Props = {
  options:any
}
const Echarts: React.FC<Props> = (props) => {
const {options} = props
const myChartId = 'myChart'+new Date() + Math.random()
  // 注册必须的组件
  echarts.use([
    LineChart,
    LegendComponent ,
    ToolboxComponent,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
  ]);
  useEffect(() => {
    // 接下来的使用就跟之前一样，初始化图表，设置配置项
    var myChart = echarts.init(document.getElementById(myChartId));
    myChart.setOption(options);
  }, [])

  return (
    <div style={{width:'100%',height:'100%'}} id={myChartId}>

    </div>
  )
}
export default Echarts